<template>
  <header>
    <div class="wrapper">
      <HelloWorld />
    </div>
  </header>

  <main>
    <h4>reactive对象属性扩展</h4>
    <button @click="changeObj">changeObj+Q</button>
    <p>objX:{{ objX }}</p>
    <p>objY:{{ objY }}</p>
    <!-- <p class="red">objY:{{ obj?.objQ }}</p> -->
    <p>obj:{{ obj }}</p>
    <br />
    <hr />

    <!-- reactive泛型 -->
    <TheWelcome msg="hello vue" />
  </main>
</template>

<script setup lang="ts">
import TheWelcome from '../components/TheWelcome.vue'
import HelloWorld from '../components/HelloWorld.vue'
import useObj from '@/hooks/app/useObj'
let { objX, objY, obj, changeObj } = useObj()
</script>

<style lang="scss" scoped></style>
